<!--
 * @Author: Aster lipian1004@163.com
 * @Date: 2024-05-14 14:20:06
 * @FilePath: \aster-flowable-vue\src\views\workflow\components\render\select-multiple.vue
 * @Description: 复选框
 * Copyright (c) 2024 by Aster, All Rights Reserved.
-->
<template>
  <el-form-item
    v-if="!_hidden"
    :prop="formItemProp"
    :label-width="labelWidth"
    :show-message="showMessage"
  >
    <template #label>
      <span v-show="showLabel">{{ formItem.title }}</span>
    </template>
    <template v-if="mode === 'design'">
      <template v-if="formItem.props.expand">
        <el-checkbox-group :model-value="formItem.value" readonly>
          <el-checkbox
            v-for="(item, i) in options"
            :key="i"
            :label="item.label"
            :value="item.value"
          />
        </el-checkbox-group>
      </template>
      <template v-else>
        <el-input :model-value="formItem.value" readonly />
      </template>
    </template>

    <template v-else-if="mode === 'form'">
      <template v-if="formItem.props.expand">
        <el-checkbox-group v-model="_value" :disabled="formItem.props.readonly">
          <el-checkbox
            v-for="(item, i) in options"
            :key="i"
            :label="item.label"
            :value="item.value"
          />
        </el-checkbox-group>
      </template>
      <template v-else>
        <el-select
          v-model="_value"
          :multiple="true"
          :clearable="true"
          :disabled="formItem.props.readonly"
        >
          <el-option v-for="(item, i) in options" :key="i" :label="item.label" :value="item.value">
            {{ item.label }}
          </el-option>
        </el-select>
      </template>
    </template>

    <template v-else-if="mode === 'search'">
      <el-select v-model="_value" :multiple="false" :clearable="true">
        <el-option v-for="(item, i) in options" :key="i" :label="item.label" :value="item.value">
          {{ item.label }}
        </el-option>
      </el-select>
    </template>

    <template v-else>
      {{ _label }}
    </template>
  </el-form-item>
</template>
<script setup lang="ts">
  import { useAppStore } from '@/stores/modules/app';
  import { evaluateFormula } from '@/utils/workflow';
  import { computed, onMounted, PropType } from 'vue';
  import mittBus from '@/utils/mittBus';
  import { getDictDataList, isNotEmpty } from '@/utils';

  const emit = defineEmits(['update:value']);
  const props = defineProps({
    value: {
      type: Array as PropType<string[]>,
      default: () => [],
    },
    mode: {
      type: String as PropType<'design' | 'form' | 'search' | 'table'>,
      default: 'design',
    },
    formData: {
      type: Object as PropType<WorkForm.FormDataModel>,
      default: {},
    },
    formItem: {
      type: Object as PropType<WorkComponent.ComponentConfig>,
      default: {},
    },
    tableId: {
      type: String,
      default: '',
    },
    tableIndex: {
      type: Number,
      default: 0,
    },
    showLabel: {
      type: Boolean,
      default: true,
    },
  });

  // 字典
  const appStore = useAppStore();

  // 键
  const formItemProp = computed(() => {
    if (isNotEmpty(props.tableId)) {
      return props.tableId + '.' + props.tableIndex + '.' + props.formItem.id;
    } else {
      return props.formItem.id;
    }
  });

  // 标签长度
  const labelWidth = computed(() => {
    if (isNotEmpty(props.tableId)) {
      return '12px';
    } else {
      return '';
    }
  });

  // 是否显示校验信息
  const showMessage = computed(() => {
    if (isNotEmpty(props.tableId)) {
      return false;
    } else {
      return true;
    }
  });

  /**
   * @description: 选项
   */
  const options = computed(() => {
    if (props.formItem.props.type === 'static') {
      return props.formItem.props.options.map((item) => {
        return {
          label: item,
          value: item,
        };
      });
    } else if (props.formItem.props.type === 'dict') {
      const dataList = getDictDataList(appStore.dictList, props.formItem.props.dictType);
      return dataList.map((item) => {
        return {
          label: item.dictLabel,
          value: item.dictValue,
        };
      });
    } else if (props.formItem.props.type === 'dynamic') {
      //TODO 动态查询待实现
    }
    return [];
  });

  /**
   * @description: 组件值
   */
  const _value = computed({
    get() {
      return props.value;
    },
    set(val) {
      emit('update:value', val);
    },
  });

  /**
   * @description: 标签
   */
  const _label = computed(() => {
    let label = '';
    if (isNotEmpty(_value.value)) {
      _value.value.forEach((val) => {
        options.value.forEach((item) => {
          if (item.value === val) {
            label += item.label + ' ';
          }
        });
      });
    }
    return label;
  });

  /**
   * @description: 是否隐藏, true-隐藏
   */
  const _hidden = computed(() => {
    let r = false;
    if (props.formItem.props.hidden) {
      let expression = props.formItem.props.hidden;
      // 如果是子表中的控件，则需要用到下标
      if (isNotEmpty(props.tableId)) {
        expression = expression.replaceAll('?', props.tableIndex);
      }
      r = evaluateFormula(expression, props.formData);
    }
    if (props.formItem.props.required) {
      // 调用form-render的方法
      mittBus.emit('changeFormRules', {
        hidden: r,
        fieldId: isNotEmpty(props.tableId)
          ? props.tableId + '.' + props.tableIndex + '.' + props.formItem.id
          : props.formItem.id,
        fieldName: props.formItem.title,
        trigger: 'blur',
      });
    }
    return r;
  });

  onMounted(() => {
    const dataStr = JSON.stringify(props.formData);
    if (!props.formItem.id || dataStr.indexOf(props.formItem.id) == -1) {
      _value.value = props.formItem.value;
    }
  });

  defineExpose({
    _hidden,
  });
</script>
<style scoped lang="scss"></style>
